<template>
	<view class="main">
		<!-- 搜索 -->
		<view class="search">
			<view class="search-inp">
				<image src="../../static/images/search.png" mode="" class="search-img"></image>
				<input type="text" value="" placeholder="请输入商品名" v-model="name"/>
			</view>
			
			<view class="search-btn">
				<span @tap="goSearch">搜索</span>
			</view>
		</view>

		<!-- 历史搜索 -->
		<view class="history" v-if="!goods.length">
			<view class="title">
				<span class="search">历史搜索</span>
				<span class="free" @tap="clearName">清空</span>
			</view>
			<view class="goods-names">
				<view class="goods-name" v-for="(item, index) in searchNames" :key="item">
					<span @tap="setName(item)">{{item}}</span>
				</view>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods" v-else>
			<scroll-view  scroll-y="true" :style="{height:scrollHeight}">
				<view class="content" v-for="(item, index) in goods" :key="index" @tap="goGoods(item)">
					<view class="img">
						<image :src="item.images" mode=""></image>
					</view>
					<view class="goods-one">
						<view class="name">
							<p>{{item.name}}</p>
							<p class="desc">{{item.content}}</p>
						</view>
						<view class="price">
							<span>￥</span> <span>{{item.price}}</span>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				searchNames:[],
				scrollHeight:0,
				goods: [], //所有商品
				name:''
			}
		},
		
		onShow() {
			const res = uni.getSystemInfoSync();
			this.scrollHeight = res.windowHeight+'px'
			let newName = uni.getStorageSync('searchName')
			if (newName) {
				this.searchNames = newName.split(',')
			} else {
				this.searchNames = []
			}
			// console.log(newName)
			
		},
		
		methods:{
			getGoods(){
				this.$http.get('/searchProduct', {params:{name:this.name}}).then(res => {
					// console.log(res)
					this.goods =  res.data.data
					if (!this.goods.length) {
						uni.showToast({
							icon:'none',
							title:'暂时没有数据'
						})
					}
				}).catch(err => {
				
				})
			},
			
			goGoods(good){
				good.number = 1
				let path = {
					item:good
				};
				
				uni.setStorageSync('searchGoods', path)
				uni.switchTab({
					url: '/pages/menu/menu'
				})
			},
			
			setName(name){
				this.name = name
				this.goSearch()
			},
			
			goSearch(){
				if (!this.name) {
					this.goods = []
					return false
				} else {
					let sNames = uni.getStorageSync('searchName')
					if (sNames) {
						if (sNames.indexOf(this.name) != -1){
							// 已经存在
							var thisName = ''
						} else {
							var thisName = ',' + this.name
						}
					}else{
						var thisName = this.name
					}
					let newName = uni.getStorageSync('searchName').concat(thisName)
					// console.log(newName)
					uni.setStorageSync('searchName', newName)
					this.searchNames = newName.split(',')
				}
				this.getGoods()
			},
			
			clearName(){
				var that = this
				uni.showModal({
					title: '警告',
					content: '确定清除所有历史搜索吗',
					success: function (res) {
						if (res.confirm) {
							uni.removeStorageSync('searchName')
							that.searchNames = []
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.main{
		background-color: $text-color-white;
		height: auto;
		overflow-y: hidden;
	}
	
	.search{
		width: 100%;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		top: 30rpx;
		
		.search-inp{
			background-color: #eee;
			margin-left: 30rpx;
			padding-left: 80rpx;
			width: 83%;
			font-size: 0.8rem;
			padding-top: 12rpx;
			
			.search-img{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				margin-left: -60rpx;
				margin-top: 6rpx;
			}
		}
		
		.search-btn{
			height: 20rpx;
			margin-right: 15rpx;
			margin-top: 10rpx;
		}
	}
	
	.history{
		.title{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 50rpx;
			
			.search{
				margin-left: 30rpx;
				font-size: 0.8rem;
				font-weight: 500;
			}
			
			.free{
				margin-right: 20rpx;
				font-size: 0.8rem;
				color: #ccc;
				width: 2rem;
				margin-top: 30rpx;
			}
		}
		
		.goods-names{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			
			.goods-name{
				border-radius: 2px;
				background-color: #eee;
				padding: 10rpx;
				margin-left: 20rpx;
				font-size: 0.8rem;
				padding-left: 30rpx;
				padding-right: 30rpx;
				border-radius: 5rpx;
				margin-top: 20rpx;
			}
		}
	}
	
	.goods{
		margin-top: 50rpx;
		height: 100%;
		margin-left: 30rpx;
		
		.content{
			display: flex;
			flex-direction: row;
			margin-top: 50rpx;
			
			.img{
				width: 200rpx;
				height: 200rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.goods-one{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 50rpx;
				
				.name{
					.desc{
						font-size: 0.8rem;
						color: #ccc;
						margin-top: 5rpx;
						
					}
				}
			}
		}
	}
</style>